<template>
	<view class="pCenter">
		<!-- 引导组件重新渲染，解决数据修改导致第二次打开实际显示的和选中的不符合的bug -->
		<template v-if="pickerShow">
			<u-select v-model="pickerShow" mode="single-column" :list="list" @confirm="confirm" z-index="30000" :default-value="[0]"></u-select>
		</template>
		<u-toast ref="uToast" />
		<view class="browser-control">
			<view class="remove_control browser-allow" style="width: 100%;">
				<view class="box_radius" style="background-color: #f2f1f1;padding: 20rpx 40rpx;" v-if="whitelist != ''">
					<view v-for="(items,index) in whitelist" :key="index" :class="index == whitelist.length - 1 ? '' : 'whiteTop'">
						<view class="remove_trust box box-pack-between box-align-center">
							<view class="box box-align-center" style="width: 65%;">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/browser.png" mode="" style="height: 60rpx;width: 60rpx;"></image>
								<view style="margin-left: 40rpx;width: 70%;">
									<view style="font-size: 30rpx;">
										{{items.type == 1 ? '白名单' : items.type == 2 ? '主页' : '书签'}}
									</view>
									<view style="font-size: 24rpx;" class="address_txt">{{items.address}}</view>
								</view>
							</view>
							<view class="box">
								<view class="delete" @click="getBrowserShow(items,index)" style="margin-right: 10rpx;">
									编辑</view>
								<view class="delete" @click="getdeleteBrowser(items)">删除</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box_radius" style="background-color: #f2f1f1;padding: 20rpx 40rpx;margin-top: 20rpx;"
					v-if="blacklist!= ''">
					<view class="remove_trust box box-pack-between box-align-center" v-for="(item1,index1) in blacklist"
						:key="item1.num" :class="index1 == blacklist.length - 1 ? '' : 'whiteTop'">
						<view class="box box-align-center" style="width: 65%;">
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/browser1.png" mode="" style="height: 60rpx;width: 60rpx;"></image>
							<view style="margin-left: 40rpx;width: 70%;">
								<view style="font-size: 30rpx;">黑名单</view>
								<view style="font-size: 24rpx;" class="address_txt">{{item1.address}}</view>
							</view>
						</view>
						<view class="box">
							<view class="delete" @click="getBrowserShow(item1)" style="margin-right: 10rpx;">编辑</view>
							<view class="delete" @click="getdeleteBrowser(item1)">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="addBrowser" @click="addShow" style="margin-top: 40rpx;border-radius: 60rpx;">
			<u-icon name="plus-circle-fill" style="margin-right: 10rpx;"></u-icon>添加网址
		</view>
		<u-modal v-model="show" :show-title="false" width="90%" @confirm="browserConfirm" @cancel="browserCancel"
			negative-top="200" mask-close-able>
			<view class="browser-center">
				<view class="browser-title">浏览器上网管控设置</view>
				<view class="box box-align-center" style="margin-top:20rpx;">
					<view class="browser-input" @click="getpickerShow">
						<input v-model="rollCall" class="input-inner input__inner" disabled type="text"
							placeholder="请选择" />
						<view class="borwser-icon box box-align-center box-pack-center">
							<view class="state_icon"></view>
						</view>
					</view>
				</view>
				<view class="browser-input" style="margin-top:20rpx">
					<u-input size="mini" v-model="addBrowser.address" type="textarea"
						placeholder="请复制完整的网址,例如: https://www.baidu.com/" placeholder-style="font-size:10px"
						:custom-style="inputObj" height="200" />
				</view>
			</view>
		</u-modal>
		<!-- 删除弹窗提示 -->
		<u-modal v-model="deleteShow" :content="'是否删除网址 ' + deleteText" show-cancel-button @confirm="confirmDelete">
		</u-modal>
	</view>
</template>

<script>
	import {
		addBrowser,
		getBrowser,
		deleteBrowser,
		editBrowser,
		getBrowserUrlInfo
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				show: false,
				pickerShow: false,
				list: [{
						value: '1',
						label: '白名单'
					},
					{
						value: '0',
						label: '黑名单'
					}
				],
				//添加网址表单
				addBrowser: {
					address: '',
					type: ''
				},
				rollCall: '',
				//黑白名单数据
				blacklist: [],
				whitelist: [],
				deleteShow: false,
				deleteText: '',
				deleteType: undefined,
				deleteId: 0,
				inputObj: {
					'font-size': '8px',
					'background-color': '#dae0e7',
					'padding': '5px 10px',
					'border-color': '#dae0e7',
					'border': '1px solid #dae0e7',
					'border-radius': '10px',
					'color': '#333333'
				},
				redactButton: false,
				defaultSelect: [0]
			}
		},
		created() {
			this.getBrowser(uni.getStorageSync('snId'))
		},
		methods: {
			getpickerShow() { //编辑禁止
				if (!this.redactButton) {
					this.pickerShow = true
				}
			},
			getBrowserShow(item, index) {
				console.log('编辑信息', {
					type: item.type,
					num: item.num
				})
				console.log("this is item", item)
				// getBrowserUrlInfo({type: item.type, num: item.num}).then(res => {
				// 	console.log('编辑信息', res)
				// })
				this.rollCall = this.list.filter(arr => {
					if (arr.value == item.type) return arr
				})[0].label
				this.redactButton = true
				this.addBrowser.type = item.type
				this.deleteId = item.num
				this.show = true
				this.addBrowser.address = item.type == 1 ? item.white_addr : item.black_addr
			},
			//删除浏览器网址弹窗
			getdeleteBrowser(item) {
				this.deleteText = item.address
				this.deleteId = item.num
				this.deleteType = item.type
				this.deleteShow = true
			},
			//删除事件
			confirmDelete() {
				let params = {
					id: uni.getStorageSync('snId'),
					browserId: this.deleteId,
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					type: this.deleteType
				}
				deleteBrowser(params).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
					this.deleteShow = false
					this.getBrowser(uni.getStorageSync('snId'))
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
					this.deleteShow = false
					this.getBrowser(uni.getStorageSync('snId'))
				})
			},
			//sn编号获取浏览器信息
			getBrowser(id) {
				getBrowser({
					id: id
				}).then(res => {
					this.whitelist = []
					this.blacklist = []
					res.data.forEach(item => {
						if (item.type == 0) {
							this.blacklist.push(item)
						} else {
							this.whitelist.push(item)
						}
					})
					console.log('浏览器数据', res.data, this.whitelist)
				}).catch(err => {
					this.blacklist = []
					this.whitelist = []
				})
			},
			//选中的值
			confirm(e) {
				console.log(e)
				this.addBrowser.type = e[0].value
				this.rollCall = e[0].label
			},
			addShow() {
				this.rollCall = ''
				this.addBrowser = {
					address: '',
					type: ''
				}
				this.redactButton = false
				this.show = true
			},
			browserConfirm() {
				//编辑
				if (this.redactButton) {
					let addBrowsers = JSON.parse(JSON.stringify(this.addBrowser))
					addBrowsers.userId = uni.getStorageSync('userId')
					addBrowsers.lastIp = uni.getStorageSync('Ip')
					addBrowsers.id = uni.getStorageSync('snId')
					addBrowsers.browserId = this.deleteId
					console.log('1', addBrowsers)
					editBrowser(addBrowsers).then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							icon: false
						})
						this.getBrowser(uni.getStorageSync('snId'))
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
							icon: false
						})
					})
					//添加网址确定事件
				} else {
					let addBrowsers = JSON.parse(JSON.stringify(this.addBrowser))
					addBrowsers.userId = uni.getStorageSync('userId')
					addBrowsers.lastIp = uni.getStorageSync('Ip')
					addBrowsers.id = uni.getStorageSync('snId')
					console.log('参数', addBrowsers)
					addBrowser(addBrowsers).then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							icon: false
						})
						this.show = false
						this.addBrowser = {
							address: '',
							type: ''
						}
						this.rollCall = ''
						this.getBrowser(uni.getStorageSync('snId'))
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
							icon: false
						})
						this.show = false
						this.addBrowser = {
							address: '',
							type: ''
						}
						this.rollCall = ''
						this.getBrowser(uni.getStorageSync('snId'))
					})
				}
			},
			//关闭事件
			browserCancel() {
				this.redactButton = false
				this.addBrowser = {
						address: '',
						type: ''
					},
					this.rollCall = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whiteTop {
		border-bottom: 2rpx solid #e8e8e8;
	}
	.remove_trust{
		padding-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.pCenter {
		//font-size: 32rpx;

		.addBrowser {
			padding: 20rpx;
			text-align: center;
			background-color: #4880ff;
			border-radius: $uni-border-radius-lg;
			margin-top: 20rpx;
			color: #FFFFFF;
		}

		.browser-center {
			padding: 40rpx;
			color: #909399;

			.browser-title {
				height: 80rpx;
				line-height: 80rpx;
			}

			.text {
				font-size: 24rpx;
			}

			.input-text {
				font-size: 24rpx;
				color: #909399;
				min-width: 100rpx;
				margin-right: 10rpx;
			}

			.state_icon {
				width: 0;
				height: 0;
				border-right: 5px solid transparent;
				border-left: 5px solid transparent;
				border-top: 5px solid #c0cad8;
				margin-left: 2px;
			}

			.borwser-icon {
				position: absolute;
				top: 0;
				right: 0;
				height: 25px;
				width: 25px;
			}

			.browser-input {
				width: 100%;
				line-height: normal;
				display: inline-table;
				border-collapse: separate;
				border-spacing: 0;
				position: relative;
				font-size: 10px;

				.input-group {
					background-color: #f5f7fa;
					color: #909399;
					vertical-align: middle;
					display: table-cell;
					position: relative;
					border: 1px solid #dcdfe6;
					border-radius: 4px;
					padding: 0 10px;
					width: 1px;
					white-space: nowrap;
					border-right: 0;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}

				.input-inner {
					-webkit-appearance: none;
					background-color: #fff;
					background-image: none;
					border-radius: 4px;
					border: 1px solid #dcdfe6;
					box-sizing: border-box;
					color: #606266;
					font-size: inherit;
					height: 40rpx;
					line-height: 40rpx;
					outline: none;
					padding: 0 15px;
					transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
					width: 100%;
					vertical-align: middle;
					display: table-cell
				}
			}
		}

		.browser-control {
			font-size: 28rpx;

			.remove_control {
				.allow {
					text-align: center;
					width: 20%;
				}

				.rm_allow {
					text-align: center;
					width: 15%;
				}
			}

			.browser-allow {
				border-radius: 12rpx;
				overflow: hidden;
				color: #000;
			}

			.browser-forbid {
				border-radius: 12rpx;
				overflow: hidden;
				color: #ffffff;
			}

			.trust_green {
				height: 80rpx;
				line-height: 80rpx;
			}
		}

		.true_browser {
			background-color: #f2f1f1;
			margin-top: 20rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		.false_browser {
			background-color: #f2f1f1;
			margin-top: 20rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}
	}

	.delete {
		color: #4880ff;
		border: 2rpx solid #4880ff;
		border-radius: $uni-border-radius-lg;
		padding: 4rpx 20rpx;
		letter-spacing: 4rpx;
		font-size: 20rpx;
	}

	.address_txt {
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
